// 模块管理优先列表
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Button, Spin, Form, Input, Table, Cascader, Select,Modal ,Upload ,Icon ,message,Card } from 'antd'
/* 引用接口文档路径 */
import ShowBigImg from '../../components/showBigImg'
import {
  prioritySelect,
  priorityType,
  priorityDelete,
  searcTitleQuery,
  addPriorityType,
  searcSortSelect,
  deleteSort,
  topSortSelect
} from 'actions/moduleManage'
import '../../style/userControl.less'

const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      typeList:[],//优先类型列表
      typeTwoList:[],//所属列表
      ModalFlg:false,//弹窗状态
      contentTitle:"",//优先标题模糊搜索
      contentTitleData:[],//搜索结果
      contentTitleSelect:{
        key:'',
        label:''
      },//选中搜索结果
      sortDataList:[],//排序列表
    }
    this.keyword={"dataType":"","contentType":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
    this.addDataTypeId = '';//设置优先内容-ID暂存
    this.addContentTypeId = '';//设置优先内容-ID暂存
  }
  componentDidMount() {
    this.selectList();
    this.dataTypeList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "dataType":this.props.form.getFieldValue('dataType'),
      "contentType":this.props.form.getFieldValue('contentType'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(prioritySelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  
  dataTypeList(){//基础数据查询
    this.props.dispatch(priorityType({},
      (respose) => {
        this.setState({
          typeList: respose.respData,
        })
    }))    
  }

  chooseDataType(value){//选择优先类型之后 改变所属列表数据
    this.props.form.setFieldsValue({contentType:''})
    this.setState({
      typeTwoList:[]
    },()=>{
      for(var i = 0; i < this.state.typeList.length;i++){
        if(this.state.typeList[i].value == String(value)){
          this.setState({
            typeTwoList:this.state.typeList[i].children
          })
        }
      }
    })
  }

  deleteData(id){//删除列表数据
    Modal.confirm({
      title: '确定要删除么？',
      onOk:()=>{
        this.props.dispatch(priorityDelete({"id":id},(respose) => {
          var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
          if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
            this.currentNumber = this.currentNumber - 1;
          }
          message.success(respose.respMsg);
          this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{},
    })
  }
  addSort(){//新增排序弹窗
    this.setState({
      sortModalFlg:true
    })
  }

  addList(){//新增弹窗
    this.setState({
      ModalFlg:true
    })
  }

  ModalCancel(){//关闭新增弹窗
    this.addDataTypeId='';
    this.addContentTypeId='';
    this.contentTypeName='';
    this.setState({
      ModalFlg:false,
      contentTitleData:[],
      contentTitle:'',
      contentTitleSelect:{key:'',label:''}
    })
  }
  sortModalCancel(){//关闭排序弹窗
    this.addDataTypeId='';
    this.addContentTypeId='';
    this.contentTypeName='';
    this.setState({
      sortModalFlg:false,
      sortDataList:[]
    })
  }

  addChoose(vaule,data){//新增里面的二级联动
    this.contentTypeName = data[1].label||''
    this.addDataTypeId = vaule[0]||''
    this.addContentTypeId = vaule[1]||''
    /*
      清空已搜索选择框内容
    */
    this.setState({
      contentTitleData:[],
      contentTitleSelect:{key:'',label:''}
    })
   
  }

  searchTitleWatch(value){
    this.setState({
      contentTitle:value.target.value||''
    })
  }

  searchTitle(){//设置优先内容-搜索功能
    if(!this.addDataTypeId){
      message.error('请先选择优先类型');
      return; 
    }
    var data ={
      'dataType':this.addDataTypeId,
      'contentType':this.addContentTypeId,
      'contentTitle':this.state.contentTitle,
    }
    this.setState({
      contentTitleData:[],
      contentTitleSelect:{key:'',label:''}
    },()=>{
      this.props.dispatch(searcTitleQuery(
        data,
        (respose) => {
          this.setState({
            contentTitleData:respose.respData
          })
      }))
    })
  }

  contentTitleSelectFun(vaule){//监听下拉框内容变化赋值
    this.setState({
      contentTitleSelect:vaule||''
    })
  }

  addDataFun(){//新增优先内容
    if(!this.addDataTypeId){
      message.error('请先选择优先类型');
      return; 
    }
    if(!this.state.contentTitleSelect.key){
      message.error('请先选择优先标题');
      return; 
    }

    var data ={
      'dataType':this.addDataTypeId,
      'contentType':this.addContentTypeId,
      'contentId':this.state.contentTitleSelect.key,
      'contentTypeName':this.contentTypeName
    }
    this.props.dispatch(addPriorityType(
      data,
      (respose) => {
        message.success(respose.respMsg);
        this.addDataTypeId='';
        this.addContentTypeId='';
        this.contentTypeName='';
        this.setState({
          ModalFlg:false,
          contentTitleData:[],
          contentTitleSelect:{key:'',label:''}
        })
        this.selectList();
    }))
  }

  addSortSelect(vaule){//排序弹窗 选择类型 搜索
    this.addDataTypeId = vaule[0]||''
    this.addContentTypeId = vaule[1]||''
    this.searchSortSelect()
  }

  searchSortSelect(){//查询可以排序数据
    var data ={
      'dataType':this.addDataTypeId,
      'contentType':this.addContentTypeId,
      'start':1,
      'end':10,
    }
    this.props.dispatch(searcSortSelect(
      data,
      (respose) => {
        this.setState({
          sortDataList:respose.respData.resultData
        })
    }))
  }

  deleteSortSelect(id){//删除排序内容
    this.props.dispatch(deleteSort(
      {id:id},
      (respose) => {
        message.success(respose.respMsg);       
        this.searchSortSelect();
    }))
  }

  topSort(id){
    var data ={
      'dataType':this.addDataTypeId,
      'contentType':this.addContentTypeId,
      'id':id,
    }
    this.props.dispatch(topSortSelect(
      data,
      (respose) => {
        message.success(respose.respMsg);       
        this.searchSortSelect();
    }))
  }

  columns() {//表格标题
    return [
      {
        title: '优先类型',
        dataIndex: 'dataTypeName',
        key: 'dataTypeName',
        width: '15%',
      },
      {
        title: '优先标题',
        dataIndex: 'contentTitle',
        key: 'contentTitle',
        width: '10%',
      },
      {
        title: '优先所属列表',
        dataIndex: 'contentTypeName',
        key: 'contentTypeName',
        width: '10%',
      },
      {
        title: '列表位置',
        dataIndex: 'dataSortNum',
        key: 'dataSortNum',
        width: '15%',
      },
      {
        title: '操作',
        width: '20%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.deleteData.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>删除</Button>          
        </div>         
        ,
      },
    ]
  }
  
  render () {
    const { getFieldDecorator } = this.props.form    
    const { Meta } = Card;
    const accountList = this.state.list.respData ? this.state.list.respData :[];//刷新页面调用接口数据赋值
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="优先类型">      
              {
                getFieldDecorator('dataType', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Select placeholder="请选择优先类型"  style={{ width: 150 }}  onChange={this.chooseDataType.bind(this)}>
                    <Select.Option value={''} key={999}>全部</Select.Option>
                    {
                      this.state.typeList.map((item,i)=> {
                        return(
                          <Select.Option value={item.value} key={i}>{item.label}</Select.Option>
                        )
                      })
                    }
                  </Select>
                )
              }
            </FormItem>    
            <FormItem label="所属列表">      
              {
                getFieldDecorator('contentType',{})(
                  <Select placeholder="请选择优先类型"  style={{ width: 150 }}>
                    <Select.Option value={''} key={998}>全部</Select.Option>
                    {
                      this.state.typeTwoList.map((item,i)=> {
                        return(
                          <Select.Option value={item.value} key={i}>{item.label}</Select.Option>
                        )
                      })
                    }
                  </Select>
                )
              }
            </FormItem> 
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addList.bind(this)}>新增</Button>
            <Button type="primary" onClick={this.addSort.bind(this)}>排序</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列
            dataSource={accountList.resultData}
            pagination={{ total: accountList.count, current:this.currentNumber, pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}       
          />
        </Spin>
        {/* 新增优先内容列表 */}
        {
          this.state.ModalFlg?
          <Modal
            width={"800px"}
            visible={this.state.ModalFlg}
            title="设置优先内容"
            onCancel={this.ModalCancel.bind(this)}
            footer={
              [<Button key="submit" type="primary"  onClick={this.addDataFun.bind(this)}>提交</Button>]
            }
          >
            <ul className="joinBlackListModal">
              <li style={{marginBottom:'20px'}}>
                <span className="title">优先类型:</span>
                <span className="content" style={{verticalAlign:'middle'}} >
                  <Cascader style={{ width: 200 }}  options={this.state.typeList}  onChange={this.addChoose.bind(this)} placeholder="请选择类型" />
                </span>
              </li>
              <li style={{marginBottom:'20px'}}>
                <span className="title">优先标题:</span>
                <span className="content" style={{verticalAlign:'middle'}} >
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} value={this.state.contentTitle} onChange={this.searchTitleWatch.bind(this)}/>
                  <span style={{cursor:'pointer'}} onClick={this.searchTitle.bind(this)}>搜索</span>
                </span>
              </li>
              <li style={{marginBottom:'20px'}}>
                <span className="title"></span>
                <span className="content" style={{verticalAlign:'middle'}} >
                    {
                      this.state.contentTitleData.length == 0?
                      <Select placeholder="请选择内容" value={'请选择内容'} style={{ width: 200 }}></Select>
                      :
                      <Select placeholder="请选择内容" labelInValue={true} style={{ width: 200 }} value={this.state.contentTitleSelect}  onChange={this.contentTitleSelectFun.bind(this)}>
                          <Select.Option value={''} key={666} style={{color:'#d9d9d9'}}>{'请选择内容'}</Select.Option>
                          {
                            this.state.contentTitleData.map((item,i)=> {
                              return(
                                <Select.Option value={item.contentId} key={i}>{item.contentTitle}</Select.Option>
                              )
                            })
                          }
                      </Select>
                    }                   
                </span>
              </li>
            </ul>
          </Modal>:''
        }
        {/* 新增优先内容排序 */}
        {
          this.state.sortModalFlg?
          <Modal
            width={"800px"}
            visible={this.state.sortModalFlg}
            title="内容排序"
            onCancel={this.sortModalCancel.bind(this)}
            footer={''}
          >
            <ul className="joinBlackListModal">
              <li style={{marginBottom:'20px'}}>
                <span className="title">优先类型:</span>
                <span className="content" style={{verticalAlign:'middle'}} >
                  <Cascader allowClear={false} style={{ width: 200 }}  options={this.state.typeList}  onChange={this.addSortSelect.bind(this)} placeholder="请选择类型" />
                </span>
              </li>
              <li style={{marginBottom:'20px'}}>
                <span className="title">优先类型:</span>
                <span className="content" style={{verticalAlign:'middle'}} >
                  {
                    this.state.sortDataList.length == 0?
                    '暂无数据':
                    this.state.sortDataList.map((item,i)=> {
                      return(
                        <div 
                          key={i} 
                          style={{
                            width:'120px',
                            float:'left',
                            margin:'0 15px 15px 0'
                          }} 
                        >
                          <div 
                            style={{
                              width:'120px',
                              display:'flex',
                              justifyContent:'center',
                              alignItems:'center'
                            }} 
                          >
                            <img src={item.imageAddr?item.imageAddr:require('../../images/baseHeader.png')}/>
                          </div>
                          <p style={{whiteSpace:'nowrap',textOverflow:'ellipsis',overflow:'hidden',marginBottom:'0'}}>{item.contentTitle}</p>
                          <p style={{marginBottom:'0'}}>
                            <span onClick={this.deleteSortSelect.bind(this,item.id)} style={{cursor:'pointer',marginRight:"5px",marginTop:"10px",display:"inline-block"}}>删除</span>
                            <span onClick={this.topSort.bind(this,item.id)} style={{cursor:'pointer',marginRight:"5px",marginTop:"10px",display:"inline-block"}}>置顶</span>
                          </p>
                        </div>
                      )
                    })
                  }
                </span>
              </li>
            </ul>
          </Modal>:''
        }
      </div>
    )
  }
}